/* 基础样式 */  
* {  
    font-family: Arial, sans-serif;  
    padding: 0;
    margin: 0;
}  
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.player {
  position: relative;
  height: 65px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);   
  margin-bottom: 20px;  
} 
 /*音乐播放器-主体  */
.player-box{
  position: absolute; 
  top: 0px; 
  z-index: 999;
  display: flex;
  align-items: center;
  width: 100%;
  height: 65px;
  /* 允许鼠标事件穿透 */  
  pointer-events: none; 
}
/* 音乐图片 */
.music-image{
  flex-grow: 1;
  width: 80px;
  display: flex;
  justify-content: center;
}
/* 音乐图片-主题 */
.music-image-body{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}
/* 歌词模块 */
.lyric{
  flex-grow: 10;
  display: flex;
  justify-content: center;
}
/* 功能组件 */
.function-btn{
  flex-grow: 1;
  pointer-events: auto; /* 捕获鼠标事件 */
}
/* 功能按钮样式 */  
.lastBtn,.nextBtn,#playPauseBtn{
  background-color: transparent;
  border: none;  
  text-align: center;  
  text-decoration: none;  
  display: inline-block;  
  font-size: 22px;  
  margin: 4px 2px;  
  cursor: pointer;  
  border-radius: 5px; /* 圆角 */  
  transition-duration: 0.4s; /* 动画效果 */  
}

/* 进度条容器的样式 */  
#progress {
  z-index: 10;
  position: absolute;
  top: 0px;
  width: 100%; 
  --progress-height:65px;
}  
  
/* 隐藏range控件默认样式 */
#progressBar[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  outline: 0;
  width: 100%;
}

/* 定义range控件轨道的样式 */
#progressBar[type="range"]::-webkit-slider-runnable-track {
  height: var(--progress-height);
  background: #ff7e5f;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #feb47b, #ff7e5f);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #feb47b, #ff7e5f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/* 定义range控件容器的样式 */
#progressBar[type="range" i]::-webkit-slider-container {
  height: var(--progress-height);
  overflow: hidden;
  background-color: transparent;
}

/* 定义range控件拇指的样式 */
#progressBar[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0px;
  height: var(--progress-height);
  background-color: #d49b97;
  /* 使用border-image属性给拇指添加渐变边框 */
  border-image: linear-gradient(#ebeaea49, #ebeaea49) 0 fill / 8 20 8 0 / 0px 0px 0 2000px;
}
